<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

<!--  //1 直接拼接  语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>

<!--  2 通过定义methods-->
  <h2>{{getfullName}}</h2>

<!--  computed是有缓存的 只有要 内部数据不发生变化 就不会重新计算 -->

</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      firstName:'xiaoliang',
      lastName:'liang'

    },
    methods:{

      getFullName:function (){

        return this.firstName+' '+this.lastName;
      },
      computed:{

        fullName:function (){

          return this.firstName+' '+this.lastName;


        }

      }


    }

  })
</script>

</body>
</html>